@import "fonts";
@import "var";


//@mixin bsd {
//  [data-theme="light"] & {
//    //box-shadow: 1px 1px 4px 0px rgba(0, 39, 49, 0.2);
//    box-shadow: 1px 1px 4px 0px #ebedf0;
//  }
//  [data-theme="dark"] & {
//    //border-bottom: 1px solid #616365;
//    //box-shadow: 1px 1px 4px 0px rgba(0, 39, 49, 0.2);
//  }
//}


//遍历主题
@mixin themeIfy {
  @each $theme-name, $theme-map in $themes {
    //!global 把局部变量强升为全局变量
    $theme-map: $theme-map !global;
    //判断html的data-theme的属性值  #{}是sass的插值表达式
    //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}


//遍历字体大小map
@mixin fontIfy {
  @each $font-name, $font-map in $fonts {
    $font-map: $font-map !global;
    [data-font-size="#{$font-name}"] & {
      @content;
    }
  }
}

//声明一个根据Key获取颜色的function
@function themed($key) {
  @return map-get($theme-map, $key);
}

//声明一个根据Key获取字体size的function
@function fsd($key) {
  @return map-get($font-map, $key);
}


//获取背景颜色
@mixin background_color($color) {
  @include themeIfy {
    //color: map-get($theme-map, 'theme-bg-c');
    background-color: themed($color);
  }
}


//获取字体颜色
@mixin font_color($color) {
  @include themeIfy {
    color: themed($color);
  }
}

//获取边框颜色
@mixin border_color($color) {
  @include themeIfy {
    border-color: themed($color);
  }
}

// 获取字体大小
@mixin font_size($size) {
  @include fontIfy {
    font-size: fsd($size);
  }
}


// 百分比换算
@function percent($num, $total) {
  @return ($num / $total) * 100%;
}


@mixin respond-to($breakpoint) {
  $query: map-get($breakpoints, $breakpoint);
  // 这里是scss error提示估计大部分人（包括我）都没怎么使用过
  @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
  }
  // 具体断点解释在这里，作者比较严谨，校验了$query合法性
  @media #{if(type-of($query) == 'string', unquote($query), inspect($query))}
  {
    @content;
  }
}

//unquote($query)：删除字符串中的引号；
//quote($query)：给字符串添加引号。
//inspect($query) Maps不能转换为纯CSS。作为变量的值或参数传递给CSS函数将会导致错误。
//使用inspect($query) 函数以产生输出字符串


@mixin bsd {
  box-shadow: 1px 1px 4px 0px $com-border-color;
}


@mixin get-font-size($font-size) {
  //接受传入的list参数，把list进行拆分，分别给属性赋值
  @if type-of($font-size) == 'list' {
    font-size: nth($font-size, 1);
    @if (length($font-size) > 1) {
      line-height: nth($font-size, 2);
    }
    //@if (length($font-size) > 2){
    // ...
    //}
  } @else {
    font-size: $font-size;
  }
}

@mixin font-size($list,$points:$breakpoint ) {
  @each $point, $size in $list {
    @if $point == "null" {
      //把对属性赋值改成调用一个@mixin
      //.#{$point}-font {
      @include get-font-size($size);
      //}

    } @else {
      @if map-has_key($points, $point) {
        $point: map_get($points, $point);
      }
      @media screen and (min-width: $point) {
        //.#{$point}-font {
        @include get-font-size($size);
        //}
      }
    }
  }
}


//在使用阿里图标的时候可以这样
@each $key, $value in $iconArray {
  .icon-#{$key} {
    &:before {
      content: "#{$value}";
    }
  }
}


//配合变量循环生成CSS
//$class-col: col-;
//$class-offset: offset-;
//
//.row {
//  display: grid;
//  grid-template-columns: repeat(12, 1fr);
//  gap: var(--mb-2-5);
//}
//
//
//
//
//@each $key, $value in $breakpoint {
//  @include respond-to(#{$key}) {
//    @for $n from 1 through 12 {
//      .#{$class-offset}#{$key}-#{$n} {
//        margin-left: ($n/12)*100%;
//      }
//    }
//  }
//}
//
//@each $key, $value in $breakpoint {
//  @include respond-to(#{$key}) {
//    @for $n from 1 through 12 {
//      .#{$class-col}#{$key}-#{$n} {
//        grid-column: span #{$n};
//        //width: ($n/12)*100%;
//      }
//    }
//  }
//}
//
//@for $n from 1 through 12 {
//  .#{$class-offset}#{$n} {
//    margin-left: ($n/12)*100%;
//  }
//}
